<template>
	<div class="feedback-container">
		<div class="feedback-header">
			<h1 class="feedback-title">留言反馈</h1>
			<p class="feedback-subtitle">我们重视您的每一条意见，感谢您的反馈</p>
		</div>

		<div class="feedback-form">
			<van-field v-model="userName" placeholder="请输入需要反馈的商店" clearable class="name-field" />

			<van-field v-model="userEmail" placeholder="请输入您的邮箱（选填）" clearable type="email" class="email-field"
				:error-message="emailError" />

			<van-field v-model="feedbackContent" placeholder="请输入您的反馈内容..." type="textarea" :rows="4" autosize clearable
				class="content-field" />

			<div class="feedback-tags">
				<span class="tag-label">反馈类型：</span>
				<van-tag v-for="tag in feedbackTags" :key="tag" :type="tagTypeMap[tag]" @click="selectTag(tag)"
					:class="{ 'tag-active': selectedTag === tag }">
					{{ tag }}
				</van-tag>
			</div>

			<van-button type="primary" round class="submit-button" @click="submitFeedback">
				提交反馈
			</van-button>
		</div>

		<div class="feedback-list">
			<h2 class="list-title">最新反馈</h2>
			<van-field v-model="searchKeyword" placeholder="搜索反馈内容" clearable class="search-field" />

			<div v-if="filteredFeedbackList.length > 0" class="feedback-items">
				<div v-for="(feedback, index) in filteredFeedbackList" :key="feedback.id" class="feedback-item"
					:class="{ 'item-even': index % 2 === 0 }">
					<div class="item-header">
						<span class="item-name">{{ feedback.name }}</span>
						<span class="item-time">{{ formatTime(feedback.time) }}</span>
						<van-tag :type="tagTypeMap[feedback.type || '其他']" size="small">
							{{ feedback.type || '其他' }}
							<van-icon v-if="isOwnFeedback(feedback)" name="delete" @click="deleteFeedback(feedback.id)"
								class="delete-icon" />
						</van-tag>
					</div>
					<div class="item-content">{{ feedback.content }}</div>
				</div>
			</div>

			<div v-else class="empty-list">
				<p>暂无反馈内容，欢迎您第一个留言！</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userName: '',
				userEmail: '',
				feedbackContent: '',
				selectedTag: '',
				emailError: '',
				searchKeyword: '',
				feedbackTags: ['食品建议', '相关问题', '服务评价', '其他'],
				tagTypeMap: {
					'食品建议': 'warning',
					'相关问题': 'danger',
					'服务评价': 'success',
					'其他': 'default'
				},
				feedbackList: []
			}
		},
		methods: {
			selectTag(tag) {
				this.selectedTag = tag;
				this.checkEmail(); // 输入时验证邮箱
			},
			submitFeedback() {
				// 表单验证
				if (!this.userName.trim()) {
					this.$toast('请输入需要反馈的商店');
					return;
				}

				if (!this.feedbackContent.trim()) {
					this.$toast('请输入反馈内容');
					return;
				}

				if (!this.selectedTag) {
					this.$toast('请选择反馈类型');
					return;
				}

				// 邮箱格式验证
				if (this.userEmail && !this.validateEmail(this.userEmail)) {
					this.$toast('请输入正确的邮箱格式');
					return;
				}

				// 创建反馈对象
				const newFeedback = {
					id: Date.now(),
					name: this.userName,
					email: this.userEmail,
					content: this.feedbackContent,
					type: this.selectedTag,
					time: new Date()
				};

				// 添加到反馈列表
				this.feedbackList.unshift(newFeedback);

				// 重置表单
				this.userName = '';
				this.userEmail = '';
				this.feedbackContent = '';
				this.selectedTag = '';
				this.emailError = '';
			},
			validateEmail(email) {
				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				return emailRegex.test(email);
			},
			formatTime(date) {
				const d = new Date(date);
				return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')} ${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
			},
			checkEmail() {
				if (this.userEmail && !this.validateEmail(this.userEmail)) {
					this.emailError = '请输入正确的邮箱格式';
				} else {
					this.emailError = '';
				}
			},
			isOwnFeedback(feedback) {
				return feedback.name === this.userName;
			},
		},
		watch: {
			userEmail() {
				this.checkEmail();
			},
			searchKeyword() {
				// 搜索实时更新
			}
		},
		computed: {
			filteredFeedbackList() {
				if (!this.searchKeyword) return this.feedbackList;
				const keyword = this.searchKeyword.toLowerCase();
				return this.feedbackList.filter(item =>
					item.name.toLowerCase().includes(keyword) ||
					item.content.toLowerCase().includes(keyword)
				);
			}
		}
	}
</script>

<style scoped>
	.feedback-container {
		max-width: 800px;
		margin: 0 auto;
		padding: 30px 20px;
		font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
	}

	.feedback-header {
		text-align: center;
		margin-bottom: 30px;
	}

	.feedback-title {
		font-size: 28px;
		color: #333;
		margin-bottom: 10px;
		font-weight: 600;
	}

	.feedback-subtitle {
		font-size: 16px;
		color: #666;
		margin: 0;
	}

	.feedback-form {
		background-color: #fff;
		border-radius: 10px;
		padding: 25px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		margin-bottom: 30px;
	}

	.name-field,
	.email-field {
		margin-bottom: 20px;
	}

	.content-field {
		margin-bottom: 20px;
	}

	.feedback-tags {
		margin-bottom: 20px;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.tag-label {
		flex: 1 1 100%;
		margin-bottom: 10px;
		color: #666;
		font-size: 16px;
	}

	.van-tag {
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.tag-active {
		background-color: #409EFF;
		color: #fff;
	}

	.submit-button {
		width: 100%;
		height: 48px;
		font-size: 16px;
	}

	.feedback-list {
		background-color: #fff;
		border-radius: 10px;
		padding: 25px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

	.search-field {
		margin-bottom: 20px;
	}

	.list-title {
		font-size: 22px;
		color: #333;
		margin-bottom: 20px;
		padding-bottom: 10px;
		border-bottom: 1px solid #eee;
	}

	.feedback-items {
		margin-top: 10px;
	}

	.feedback-item {
		padding: 20px;
		margin-bottom: 15px;
		border-radius: 8px;
		background-color: #f9f9f9;
		transition: all 0.3s ease;
		position: relative;
	}

	.feedback-item:hover {
		background-color: #f0f5ff;
		transform: translateY(-2px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
	}

	.item-even {
		background-color: #f5f7fa;
	}

	.item-even:hover {
		background-color: #e6edf7;
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.item-name {
		font-weight: 500;
		color: #333;
		font-size: 16px;
	}

	.item-time {
		color: #999;
		font-size: 14px;
	}

	.item-content {
		color: #666;
		font-size: 16px;
		line-height: 1.6;
	}

	.empty-list {
		text-align: center;
		padding: 30px 0;
		color: #999;
		font-size: 16px;
	}

	.delete-icon {
		margin-left: 5px;
		cursor: pointer;
		color: #999;
		font-size: 12px;
	}

	.delete-icon:hover {
		color: #f56c6c;
	}

	/* 响应式适配 */
	@media (max-width: 640px) {
		.feedback-container {
			padding: 20px 15px;
		}

		.feedback-title {
			font-size: 24px;
		}

		.submit-button {
			height: 44px;
			font-size: 14px;
		}

		.feedback-item {
			padding: 15px;
			margin-bottom: 10px;
		}
	}
</style>